<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="飞易腾科技成功案例 - 查看我们的精选项目作品">
    <title>成功案例 - 飞易腾科技</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Tailwind CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="style/fyt.css" rel="stylesheet">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <i class="fas fa-rocket"></i> 飞易腾科技
            </a>

            <button class="navbar-toggler" type="button" id="navToggle">
                <i class="fas fa-bars"></i>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="services.html">服务</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="cases.html">案例</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="news.html">新闻</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.html">关于</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">联系</a>
                    </li>
                    <li class="nav-item">
                        <span class="dark-mode-toggle" id="darkModeToggle">
                            <i class="fas fa-moon"></i>
                        </span>
                    </li>
                </ul>
            </div>

            <!-- Mobile Menu -->
            <div class="mobile-menu" id="mobileMenu">
                <a class="nav-link" href="index.html">首页</a>
                <a class="nav-link" href="services.html">服务</a>
                <a class="nav-link active" href="cases.html">案例</a>
                <a class="nav-link" href="news.html">新闻</a>
                <a class="nav-link" href="about.html">关于</a>
                <a class="nav-link" href="contact.html">联系</a>
            </div>
        </div>
    </nav>

    <!-- Page Header -->
    <section class="page-header">
        <div class="hero-bg-image" style="background-image: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1920');"></div>
        <div class="hero-overlay"></div>
        <div class="mesh-bg"></div>
        <div class="tech-grid"></div>
        <div class="floating-elements">
            <div class="float-circle float-1"></div>
            <div class="float-circle float-2"></div>
            <div class="float-square float-4"></div>
        </div>
        <div class="container text-center">
            <div class="hero-badge fade-in">
                <i class="fas fa-trophy"></i> 精选案例
            </div>
            <h1 class="display-4 fw-bold mb-3">成功案例</h1>
            <p class="lead mb-4">我们的作品遍布各行各业,每一个项目都倾注心血,打造精品</p>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                    <li class="breadcrumb-item active">案例</li>
                </ol>
            </nav>
        </div>
    </section>

    <!-- Cases Section -->
    <section class="py-5">
        <div class="container">
            <div class="filter-buttons fade-in mb-5">
                <button class="filter-btn active" data-filter="all">全部</button>
                <button class="filter-btn" data-filter="ecommerce">电商</button>
                <button class="filter-btn" data-filter="corporate">企业</button>
                <button class="filter-btn" data-filter="creative">创意</button>
                <button class="filter-btn" data-filter="tech">科技</button>
            </div>

            <div class="row" id="casesContainer">
                <div class="col-lg-4 col-md-6 fade-in case-item mb-4" data-category="ecommerce">
                    <a href="case-detail.html?id=1" class="case-card-link">
                        <div class="case-card">
                            <div class="case-image-wrapper">
                                <img src="https://images.unsplash.com/photo-1661956602116-aa6865609028?w=600" alt="电商案例" class="case-image" loading="lazy">
                                <div class="case-overlay">
                                    <span class="case-overlay-btn">查看详情</span>
                                </div>
                            </div>
                            <div class="case-content">
                                <span class="case-category">电商平台</span>
                                <h3>时尚购物商城</h3>
                                <p>为时尚品牌打造的高端电商平台，集成支付、物流、会员系统</p>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 fade-in case-item mb-4" data-category="corporate">
                    <a href="case-detail.html?id=2" class="case-card-link">
                        <div class="case-card">
                            <div class="case-image-wrapper">
                                <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600" alt="企业案例" class="case-image" loading="lazy">
                                <div class="case-overlay">
                                    <span class="case-overlay-btn">查看详情</span>
                                </div>
                            </div>
                            <div class="case-content">
                                <span class="case-category">企业官网</span>
                                <h3>科技公司官网</h3>
                                <p>现代化企业展示平台，突出品牌实力与企业文化</p>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 fade-in case-item mb-4" data-category="creative">
                    <a href="case-detail.html?id=3" class="case-card-link">
                        <div class="case-card">
                            <div class="case-image-wrapper">
                                <img src="https://images.unsplash.com/photo-1558655146-d09347e92766?w=600" alt="创意案例" class="case-image" loading="lazy">
                                <div class="case-overlay">
                                    <span class="case-overlay-btn">查看详情</span>
                                </div>
                            </div>
                            <div class="case-content">
                                <span class="case-category">创意设计</span>
                                <h3>艺术工作室网站</h3>
                                <p>充满创意的视觉设计，完美展现艺术家的独特风格</p>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 fade-in case-item mb-4" data-category="tech">
                    <a href="case-detail.html?id=4" class="case-card-link">
                        <div class="case-card">
                            <div class="case-image-wrapper">
                                <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600" alt="科技案例" class="case-image" loading="lazy">
                                <div class="case-overlay">
                                    <span class="case-overlay-btn">查看详情</span>
                                </div>
                            </div>
                            <div class="case-content">
                                <span class="case-category">科技平台</span>
                                <h3>SaaS管理系统</h3>
                                <p>功能完善的企业级SaaS平台，提供全方位的管理解决方案</p>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 fade-in case-item mb-4" data-category="ecommerce">
                    <a href="case-detail.html?id=5" class="case-card-link">
                        <div class="case-card">
                            <div class="case-image-wrapper">
                                <img src="https://images.unsplash.com/photo-1472851294608-062f824d29cc?w=600" alt="电商案例2" class="case-image" loading="lazy">
                                <div class="case-overlay">
                                    <span class="case-overlay-btn">查看详情</span>
                                </div>
                            </div>
                            <div class="case-content">
                                <span class="case-category">电商平台</span>
                                <h3>生活家居商城</h3>
                                <p>温馨的家居购物体验，智能推荐系统提升转化率</p>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 fade-in case-item mb-4" data-category="corporate">
                    <a href="case-detail.html?id=6" class="case-card-link">
                        <div class="case-card">
                            <div class="case-image-wrapper">
                                <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=600" alt="企业案例2" class="case-image" loading="lazy">
                                <div class="case-overlay">
                                    <span class="case-overlay-btn">查看详情</span>
                                </div>
                            </div>
                            <div class="case-content">
                                <span class="case-category">企业官网</span>
                                <h3>金融服务平台</h3>
                                <p>专业可信的金融服务展示，强调安全性与专业性</p>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 fade-in case-item mb-4" data-category="tech">
                    <a href="case-detail.html?id=7" class="case-card-link">
                        <div class="case-card">
                            <div class="case-image-wrapper">
                                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=600" alt="科技案例2" class="case-image" loading="lazy">
                                <div class="case-overlay">
                                    <span class="case-overlay-btn">查看详情</span>
                                </div>
                            </div>
                            <div class="case-content">
                                <span class="case-category">科技平台</span>
                                <h3>智能数据平台</h3>
                                <p>大数据可视化分析平台，助力企业数字化转型</p>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 fade-in case-item mb-4" data-category="creative">
                    <a href="case-detail.html?id=8" class="case-card-link">
                        <div class="case-card">
                            <div class="case-image-wrapper">
                                <img src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?w=600" alt="创意案例2" class="case-image" loading="lazy">
                                <div class="case-overlay">
                                    <span class="case-overlay-btn">查看详情</span>
                                </div>
                            </div>
                            <div class="case-content">
                                <span class="case-category">创意设计</span>
                                <h3>设计师作品集</h3>
                                <p>独特的视觉呈现，打造个性化的设计师品牌</p>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 fade-in case-item mb-4" data-category="ecommerce">
                    <a href="case-detail.html?id=9" class="case-card-link">
                        <div class="case-card">
                            <div class="case-image-wrapper">
                                <img src="https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=600" alt="电商案例3" class="case-image" loading="lazy">
                                <div class="case-overlay">
                                    <span class="case-overlay-btn">查看详情</span>
                                </div>
                            </div>
                            <div class="case-content">
                                <span class="case-category">电商平台</span>
                                <h3>美妆电商平台</h3>
                                <p>精致的美妆购物平台，提供个性化推荐服务</p>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 fade-in case-item mb-4" data-category="tech">
                    <a href="case-detail.html?id=10" class="case-card-link">
                        <div class="case-card">
                            <div class="case-image-wrapper">
                                <img src="https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?w=600" alt="科技案例3" class="case-image" loading="lazy">
                                <div class="case-overlay">
                                    <span class="case-overlay-btn">查看详情</span>
                                </div>
                            </div>
                            <div class="case-content">
                                <span class="case-category">科技平台</span>
                                <h3>在线教育平台</h3>
                                <p>互动式在线学习平台，让教育更智能高效</p>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 fade-in case-item mb-4" data-category="corporate">
                    <a href="case-detail.html?id=11" class="case-card-link">
                        <div class="case-card">
                            <div class="case-image-wrapper">
                                <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600" alt="企业案例3" class="case-image" loading="lazy">
                                <div class="case-overlay">
                                    <span class="case-overlay-btn">查看详情</span>
                                </div>
                            </div>
                            <div class="case-content">
                                <span class="case-category">企业官网</span>
                                <h3>地产集团官网</h3>
                                <p>大气专业的地产集团展示平台</p>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 fade-in case-item mb-4" data-category="creative">
                    <a href="case-detail.html?id=12" class="case-card-link">
                        <div class="case-card">
                            <div class="case-image-wrapper">
                                <img src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=600" alt="创意案例3" class="case-image" loading="lazy">
                                <div class="case-overlay">
                                    <span class="case-overlay-btn">查看详情</span>
                                </div>
                            </div>
                            <div class="case-content">
                                <span class="case-category">创意设计</span>
                                <h3>汽车品牌网站</h3>
                                <p>科技与艺术结合的汽车品牌展示</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <!-- Pagination -->
            <nav aria-label="案例分页" class="mt-5">
                <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1">上一页</a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="bg-light py-5">
        <div class="container text-center">
            <h2 class="mb-4">想要了解更多案例细节？</h2>
            <p class="lead mb-4">联系我们，获取完整的项目案例手册</p>
            <a href="contact.html" class="cta-button">
                联系我们 <i class="fas fa-arrow-right ms-2"></i>
            </a>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="友links-section">
                <h4 class="text-center mb-4" style="color: white; font-weight: 600;">友情链接</h4>
                <div class="row">
                    <div class="col-12">
                        <div class="friendly-links">
                            <a href="https://www.aliyun.com" target="_blank" class="friendly-link">阿里云</a>
                            <a href="https://cloud.tencent.com" target="_blank" class="friendly-link">腾讯云</a>
                            <a href="https://www.huaweicloud.com" target="_blank" class="friendly-link">华为云</a>
                            <a href="https://github.com" target="_blank" class="friendly-link">Github</a>
                            <a href="https://www.bootcdn.cn" target="_blank" class="friendly-link">BootCDN</a>
                            <a href="https://www.npmjs.com" target="_blank" class="friendly-link">NPM</a>
                            <a href="https://developer.mozilla.org" target="_blank" class="friendly-link">MDN</a>
                            <a href="https://stackoverflow.com" target="_blank" class="friendly-link">StackOverflow</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center my-5">
                <div class="footer-links mb-4">
                    <a href="#" class="social-icon" title="微信"><i class="fab fa-weixin"></i></a>
                    <a href="#" class="social-icon" title="微博"><i class="fab fa-weibo"></i></a>
                    <a href="#" class="social-icon" title="Github"><i class="fab fa-github"></i></a>
                    <a href="#" class="social-icon" title="领英"><i class="fab fa-linkedin"></i></a>
                    <a href="#" class="social-icon" title="Twitter"><i class="fab fa-twitter"></i></a>
                </div>
                <p class="mb-2" style="font-size: 1rem;">&copy; 2024 飞易腾科技 版权所有</p>
                <p class="text-muted small mb-4">专注于创新的网站建设服务 | 飞速响应 · 易用体验 · 腾飞助力</p>
            </div>

            <div class="footer-bottom">
                <div class="row align-items-center">
                    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
                        <div class="qrcode-section">
                            <div class="qrcode-item">
                                <div class="qrcode-placeholder">
                                    <i class="fab fa-weixin" style="font-size: 4rem; color: #07c160;"></i>
                                    <p class="mt-2 mb-0" style="font-size: 0.85rem;">微信公众号</p>
                                </div>
                            </div>
                            <div class="qrcode-item">
                                <div class="qrcode-placeholder">
                                    <i class="fas fa-qrcode" style="font-size: 4rem; color: #6366f1;"></i>
                                    <p class="mt-2 mb-0" style="font-size: 0.85rem;">微信小程序</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-6">
                        <div class="beian-info">
                            <p class="mb-2">
                                <i class="fas fa-shield-alt me-2"></i>
                                <a href="https://beian.miit.gov.cn" target="_blank" class="beian-link">粤ICP备2024123456号-1</a>
                            </p>
                            <p class="mb-2">
                                <i class="fas fa-balance-scale me-2"></i>
                                <a href="http://www.beian.gov.cn" target="_blank" class="beian-link">
                                    <img src="" alt="" class="me-1" style="vertical-align: text-bottom;">
                                    粤公网安备 44030502000000号
                                </a>
                            </p>
                            <p class="mb-2">
                                <i class="fas fa-copyright me-2"></i>
                                增值电信业务经营许可证：粤B2-20240000
                            </p>
                            <p class="mb-0 small text-muted">
                                <i class="fas fa-map-marker-alt me-2"></i>
                                公司地址：广东省深圳市南山区科技园南区深圳湾科技生态园
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer-disclaimer">
                <p class="mb-0 small">
                    本网站所有内容及图片均受法律保护，未经许可不得转载、复制或镜像。
                    <span class="mx-2">|</span>
                    网站内容仅供参考，不作为任何法律依据。
                </p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>

    <script>
        // Navbar Scroll Effect
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        // Mobile Menu Toggle
        const navToggle = document.getElementById('navToggle');
        const mobileMenu = document.getElementById('mobileMenu');

        navToggle?.addEventListener('click', function() {
            mobileMenu.classList.toggle('active');
        });

        // Dark Mode Toggle
        const darkModeToggle = document.getElementById('darkModeToggle');
        const body = document.body;

        if (localStorage.getItem('darkMode') === 'enabled') {
            body.classList.add('dark-mode');
            darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
        }

        darkModeToggle.addEventListener('click', function() {
            body.classList.toggle('dark-mode');

            if (body.classList.contains('dark-mode')) {
                localStorage.setItem('darkMode', 'enabled');
                darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
            } else {
                localStorage.setItem('darkMode', null);
                darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
            }
        });

        // Scroll Animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.fade-in').forEach(element => {
            observer.observe(element);
        });

        // Case Filter
        const filterButtons = document.querySelectorAll('.filter-btn');
        const caseItems = document.querySelectorAll('.case-item');

        filterButtons.forEach(button => {
            button.addEventListener('click', function() {
                filterButtons.forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');

                const filterValue = this.getAttribute('data-filter');

                caseItems.forEach(item => {
                    if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
                        item.style.display = 'block';
                        setTimeout(() => {
                            item.style.opacity = '1';
                            item.style.transform = 'scale(1)';
                        }, 10);
                    } else {
                        item.style.opacity = '0';
                        item.style.transform = 'scale(0.8)';
                        setTimeout(() => {
                            item.style.display = 'none';
                        }, 300);
                    }
                });
            });
        });

        // Lazy loading
        const images = document.querySelectorAll('img[loading="lazy"]');
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.src;
                    img.classList.add('loaded');
                    observer.unobserve(img);
                }
            });
        });

        images.forEach(img => imageObserver.observe(img));
    </script>
</body>
</html>
